<template>
  <div class="page page-home">
    <div class="navbar navbar-large navbar-transparent">
      <div class="navbar-bg"></div>
      <div class="navbar-inner navbar-inner-centered-title">
        <div class="left">
          <a class="link icon-only panel-open" data-panel="left">
            <i class="icon f7-icons if-not-md">menu</i>
            <i class="icon material-icons md-only">menu</i>
          </a>
        </div>
        <div class="title sliding">Framework7</div>
        <div class="right">
          <a class="link icon-only searchbar-enable" data-searchbar=".searchbar-components">
            <i class="icon f7-icons if-not-md">search</i>
            <i class="icon material-icons md-only">search</i>
          </a>
        </div>
        <div class="title-large">
          <div class="title-large-text">Framework7</div>
        </div>
        <form data-search-container=".components-list" data-search-in="a"
          class="searchbar searchbar-expandable searchbar-components searchbar-init">
          <div class="searchbar-inner">
            <div class="searchbar-input-wrap">
              <input type="search" placeholder="Search components" />
              <i class="searchbar-icon"></i>
              <span class="input-clear-button"></span>
            </div>
            <span class="searchbar-disable-button">Cancel</span>
          </div>
        </form>
      </div>
    </div>
    <div class="page-content">
      <div class="list list-strong inset list-dividers-ios searchbar-hide-on-search">
        <ul>
          <li>
            <a class="item-content item-link" href="/about/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">About Framework7</div>
              </div>
            </a>
          </li>
        </ul>
      </div>
      <div class="block-title searchbar-found">Components</div>
      <div class="list list-strong inset list-dividers-ios components-list searchbar-found">
        <ul>
          <li>
            <a class="item-content item-link" href="/accordion/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Accordion</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/action-sheet/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Action Sheet</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/area-chart/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Area Chart</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/autocomplete/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Autocomplete</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/badge/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Badge</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/breadcrumbs/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Breadcrumbs</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/buttons/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Buttons</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/calendar/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Calendar / Date Picker</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/cards/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Cards</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/cards-expandable/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Cards Expandable</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/checkbox/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Checkbox</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/chips/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Chips / Tags</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/color-picker/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Color Picker</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/contacts-list/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Contacts List</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/content-block/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Content Block</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/data-table/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Data Table</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/dialog/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Dialog</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/fab/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">FAB</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/fab-morph/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">FAB Morph</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/form-storage/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Form Storage</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/gauge/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Gauge</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/grid/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Grid / Layout Grid</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/icons/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Icons</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/infinite-scroll/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Infinite Scroll</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/inputs/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Inputs</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/list-button/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">List Button</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/list/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">List View</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/list-index/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">List Index</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/login-screen/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Login Screen</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/menu-list/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Menu List</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/messages/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Messages</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/navbar/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Navbar</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/notifications/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Notifications</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/panel/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Panel / Side Panels</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/photo-browser/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Photo Browser</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/picker/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Picker</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/pie-chart/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Pie Chart</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/popover/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Popover</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/popup/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Popup</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/preloader/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Preloader</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/progressbar/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Progress Bar</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/pull-to-refresh/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Pull To Refresh</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/radio/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Radio</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/range/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Range Slider</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/searchbar/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Searchbar</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/searchbar-expandable/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Searchbar Expandable</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/segmented/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Segmented</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/sheet-modal/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Sheet Modal</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/skeleton/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Skeleton (Ghost) Layouts</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/smart-select/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Smart Select</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/sortable/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Sortable List</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/stepper/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Stepper</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/subnavbar/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Subnavbar</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/swipeout/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Swipeout (Swipe To Delete)</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/swiper/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Swiper Slider</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/tabs/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Tabs</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/text-editor/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Text Editor</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/timeline/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Timeline</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/toast/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Toast</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/toggle/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Toggle</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/toolbar-tabbar/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Toolbar & Tabbar</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/tooltip/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Tooltip</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/treeview/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Treeview</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/virtual-list/">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Virtual List</div>
              </div>
            </a>
          </li>
        </ul>
      </div>
      <div class="list list-strong inset simple-list searchbar-not-found">
        <ul>
          <li>Nothing found</li>
        </ul>
      </div>
      <div class="block-title searchbar-hide-on-search">Themes</div>
      <div class="list list-strong inset list-dividers-ios searchbar-hide-on-search">
        <ul>
          <li>
            <a href="./?theme=ios" class="external item-content item-link">
              <div class="item-inner">
                <div class="item-title">iOS Theme</div>
              </div>
            </a>
          </li>
          <li>
            <a href="./?theme=md" class="external item-content item-link">
              <div class="item-inner">
                <div class="item-title">Material (MD) Theme</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/color-themes/" class="item-content item-link">
              <div class="item-inner">
                <div class="item-title">Color Themes</div>
              </div>
            </a>
          </li>
        </ul>
      </div>
      <div class="block-title searchbar-hide-on-search">Page Loaders & Router</div>
      <div class="list list-strong inset list-dividers-ios searchbar-hide-on-search">
        <ul>
          <li>
            <a class="item-content item-link" href="/page-transitions/">
              <div class="item-inner">
                <div class="item-title">Page Transitions</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/page-loader-component/vladimir/123/about-me/1/?start=0&end=30#top">
              <div class="item-inner">
                <div class="item-title">Component Page</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/load-something-that-doesnt-exist/">
              <div class="item-inner">
                <div class="item-title">Default Route (404)</div>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  export default function (props, ctx) {
    return $render;
  };
</script>
